<template>
    <div class="issue">
        <div class="issue-write">
            <el-form>
                <el-input
                    type="textarea"
                    placeholder="亲，可以谈下你的想法哦！"
                    v-model="issueWord"
                    maxlength="300"
                    show-word-limit
                >
                </el-input>
                <div class="issue-write-button">
                    <el-button @click="issueSubmit">提交</el-button>
                </div>
            </el-form>
        </div>
        <div class="issue-show">
            <issue-show-component @findIssueList="findIssueList"  :issue-data="issueData" v-loading="issueContentLoding"></issue-show-component>
            <div style="text-align: center" v-if="pageSize < total">
                <!--<el-button type="text" @click="loadMoreIssue">更多评论...</el-button>-->
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="loadMoreIssue"
                               :current-page="pageIndex" :page-size="pageSize"
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import issueShowComponent from './issueShowComponent'
    export default {
        name: "issueComponent",
        data(){
            return {
                issueWord:"",
                issueData:{},

                pageIndex: 1,
                pageSize: 10,
                total: 0,

                issueContentLoding:true,
            }
        },
        components:{issueShowComponent},
        props:{
            contentId: {
                type: Number
            },
            type:{
                type:Number
            }
        },
        methods:{
            issueSubmit(){
                let data = {
                    'type': this.type,
                    'parentId': -1,
                    'contentId': this.contentId,
                    'word': this.issueWord,
                    'isShow': 0,
                };
                if(data.word && (data.word.trim()).length > 0) {
                    this.$api.Issue.save(data).then(data => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                            });
                            this.issueWord = '';
                            this.findIssueList();
                        }else if(data && data.code === 5000){
                            this.$confirm(data.msg+'是否登录或者简单注册下?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$router.push("/login");
                            });
                        }else {
                            this.$message.error(data.msg)
                        }
                    })
                }else{
                    this.$message.error("内容不可为空！")
                }
            },

            findIssueList(){
                this.issueContentLoding=true;
                let data={
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'contentId':this.contentId,
                };
                this.$api.Issue.showList(data).then(data=>{
                    if (data && data.code === 0) {
                        this.issueData = data.page;
                        this.total=data.page.totalCount;
                    } else {
                        this.$message.error(data.msg)
                    }
                    this.issueContentLoding=false;
                })
            },
            findIssueListAddDelay(){
                let _self = this;
                let times = 0;
                let timer = setInterval(()=>{
                    if(_self.contentId){
                        _self.findIssueList()
                        clearInterval(timer);
                    }
                    times ++;
                    if(times == 10){
                        console.log("contentId为空，重试10次也是空=10s，异常.....");
                        clearInterval(timer);
                    }
                    console.log("contentId为空，重试");
                },1000)
            },

            loadMoreIssue(pageIndex){
                this.pageIndex = pageIndex
                this.findIssueList()
            },

        },
        // activated(){
        //     this.findIssueList();
        // },
        mounted(){
            this.findIssueListAddDelay();
        },
    }
</script>

<style scoped>

    .issue-write{
        padding: 10px;
    }
    .issue-write-button{
        margin-top: 5px;
        text-align: right;
    }



</style>